<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/topLogo.css"/>
		<style>
			.mui-input-group {
				text-align: center;
				width: 80%;
				margin: 0 10%;
			}
			
			.mui-input-row {
				position: relative;
			}
			
			.mui-input-row i.iconfont.icon {
				display: inline-block;
				width: 10%;
				color: #FEB406;
			}
			
			.mui-input-row input {
				display: inline-block;
				width: 80%;
				border-bottom: 1px solid #efeff4;
			}
			
			.mui-input-row input:focus {
				border-color: #FEB406;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.link-area {
				display: block;
				text-align: center;
				margin-top: 10%;
			}
			
			.link-area a {
				font-size: 14px;
				padding: 0 15px;
			}
			
			.link-area a:first-child {
				color: #FEB406;
			}
			
			.link-area a:last-child {
				color: #AAAAAA;
			}
			
			#login-form {
				text-align: center;
			}
			
			.mui-input-group:before,
			.mui-input-group:after,
			.mui-input-row:after {
				display: none;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav bar-inverse">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<div class="mui-content">
			<div class="infoTop">
				<img src="../images/icon/logo.png" />
			</div>
			<div class="infoButtom"></div>
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<i class="iconfont icon">&#xe625;</i>
					<input id='account' type="text" value="rootroot" class="mui-input-clear mui-input" placeholder="用户名 / 手机号">
				</div>
				<div class="mui-input-row">
					<i class="iconfont icon">&#xe670;</i>
					<input id='password' type="password" value="rootroot" class="mui-input-clear mui-input" placeholder="密码">
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='login' class="mui-btn btn-block btn-main" data-loading-text = "登录中">登录</button>
				<div class="link-area">
					<a id='register'>注册账号</a>
					<a id='reset-password'>忘记密码</a>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.enterfocus.js"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js"></script>
		<script>
			mui.plusReady(function() {
				var accountbox = document.getElementById("account");
				var passwordbox = document.getElementById("password");
				var loginbtn = document.getElementById("login");
				function login(loginInfo, callback) {
					callback = callback || mui.noop;
					loginInfo = loginInfo || {};
					loginInfo.account = loginInfo.account || '';
					loginInfo.password = loginInfo.password || '';
					if(loginInfo.account.length < 5) {
						return callback('账号最短为 5 个字符');
					}
					if(loginInfo.password.length < 6) {
						return callback('密码最短为 6 个字符');
					}
					Common.ajax({
						url : baseURL + "user/sid.json"
					}, function(data) {
						console.log(JSON.stringify(data));
						var url = baseURL + "user/login.json?userName=";
						url += loginInfo.account + '&password=' + loginInfo.password;
						Common.ajax({
							url : url
						}, function(data) {
							mui(loginbtn).button('reset');
							console.log(JSON.stringify(data));
							if(data.code == 1) {
								mui.toast("登录成功");
								var info = plus.push.getClientInfo();
								var token = info.token;
								var cid = info.clientid;
								console.log('token ' + token);
								console.log('cid   ' + cid);
								Common.ajax({
									url : baseURL + 'selfInfo/updateCid/' + cid + '/' + token + '.json'
								}, function(data) {
									console.log(JSON.stringify(data));
								}, function(xhr) {
									mui.toast('网络异常，请稍后再试');
									console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
								})
								User.createState(loginInfo,data.userInfo);
								return callback();
							} else {
								callback('用户名或密码错误');
								passwordbox.value = '';
							}
						}, function(xhr) {
							mui(loginbtn).button('reset');
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					}, function(xhr) {
						mui(loginbtn).button('reset');
						mui.toast('网络异常，请稍后再试');
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				};
				mui('.mui-content-padded').on('tap', '#login', function() {
					mui(this).button('loading');
					accountbox.blur();
					passwordbox.blur();
					var self = this;
					var loginInfo = {
						account: accountbox.value,
						password: passwordbox.value
					};

					login(loginInfo, function(err) {
						mui(loginbtn).button('reset');
						if(err) {
							plus.nativeUI.toast(err);
							return;
						}
						// 1 代表登录成功
						var logindata = User.islogin() ? 1 : 0;
						//传参数
						var mePage = plus.webview.getWebviewById('pages/me.html');
						var msgPage = plus.webview.getWebviewById('pages/message.html');
						var artshowPage = plus.webview.getWebviewById('pages/artshow.html');
						mui.fire(mePage, 'update', {
							logindata: logindata
						});
						mui.fire(msgPage, 'reload');
						var indexPage = plus.webview.getLaunchWebview();
						mui.fire(indexPage, 'stateChange');
						mui.fire(artshowPage, 'stateChange');
						mui.back();
					});
				})
			})
			
			// 打开注册或找回密码页
			mui('.link-area').on('tap', 'a', function() {
				Common.openWindow(this.id + '.html');
			})
		</script>
	</body>

</html>